<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Upload 上传2</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
.upload-icon{
	width: 3em;
	height: 3em;
	color: #1677ff;
}
</style>
<body>

<div id="app">
	<a-affix :offset-top="10"><div id="upload_links"></div></a-affix><script src="links.js"></script><script>upload_link();</script>
	
	<a-divider class="a-divi" orientation="left">照片墙</a-divider><!-- =============================================================== -->
	<p class="desc">用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload v-model:file-list="fileList10_1" action="http://oa.qiqiao.com/common/common/uploaddemo" list-type="picture-card" @preview="handlePreview10_1">
			<div v-if="fileList10_1.length < 5">
				<plus-outlined class="ant-icon"></plus-outlined>
				<div style="margin-top: 8px">Upload</div>
			</div>
		</a-upload>
		<a-modal :open="previewVisible10_1" :title="previewTitle10_1" :footer="null" @cancel="handleCancel10_1">
			<img alt="example" style="width: 100%" :src="previewImage10_1" />
		</a-modal>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">拖拽上传</a-divider><!-- =============================================================== -->
	<p class="desc">把文件拖入指定区域，完成上传，同样支持点击上传。设置 multiple 后，可以一次上传多个文件。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload-dragger v-model:file-List="fileList11_1" :multiple="true" action="http://oa.qiqiao.com/common/common/uploaddemo"
			@change="handleChange11_1" @drop="handleDrop11_1">
			<p class="ant-upload-drag-icon"><inbox-outlined class="upload-icon"></inbox-outlined></p>
			<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
			<p class="ant-upload-hint">支持单文件和多文件上传，允许指定类型的文件上传。</p>
		</a-upload-dragger>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">手动上传</a-divider><!-- =============================================================== -->
	<p class="desc">beforeUpload 返回 false 后，手动上传文件。</p>
	<p class="desc">官方的这个实例没有试验成功，建议使用“先上传，后统一处理的方式”实现手动上传</p>
	<p class="desc">“先上传，后统一处理的方式”，其实就是先全部上传到服务器，但没有写入到数据库，最后手动点'Start Upload'按钮的时候，再把文件位置写入到数据库</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload :file-list="fileList12_1" :before-upload="beforeUpload12" @remove="handleRemove12">
			<a-button>
				<upload-outlined class="ant-icon"></upload-outlined> Select File
			</a-button>
		</a-upload>
		<a-button type="primary" :disabled="fileList12_1.length === 0" :loading="uploading12" style="margin-top: 16px" @click="handleUpload12">
			{{ uploading12 ? 'Uploading' : 'Start Upload' }}
		</a-button>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义预览</a-divider><!-- =============================================================== -->
	<p class="desc">自定义本地预览，用于处理非图片格式文件（例如视频文件）。【这个例子还没研究明白。】</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload v-model:file-list="fileList13_1" list-type="picture" action="http://oa.qiqiao.com/common/common/uploaddemo"
			:preview-file="previewFile13">
			<a-button>
				<upload-outlined class="ant-icon"></upload-outlined> Upload
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义进度条样式</a-divider><!-- =============================================================== -->
	<p class="desc">使用 progress 属性自定义进度条样式。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload v-model:file-list="fileList14_1" action="http://oa.qiqiao.com/common/common/uploaddemo" :progress="progress14" @change="handleChange11_1">
			<a-button>
				<upload-outlined class="ant-icon"></upload-outlined>
				Click to Upload
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义交互图标</a-divider><!-- =============================================================== -->
	<p class="desc">使用相应插槽设置列表交互图标。【插槽有问题，不过这个用法基本没必要，所以没有继续研究。】</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload v-model:file-list="fileList15_1" action="http://oa.qiqiao.com/common/common/uploaddemo"
			:show-upload-list="{ showDownloadIcon: true, showRemoveIcon: true }" @change="handleChange11_1">
			<a-button>
				<upload-outlined class="ant-icon"></upload-outlined> Upload
			</a-button>
			<template #downloadIcon>download</template>
			<template #removeIcon>
				<star-outlined class="ant-icon" @click="handleClick15"></star-outlined>
			</template>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义上传列表</a-divider><!-- =============================================================== -->
	<p class="desc">使用 itemRender 插槽进行完全自定义列表。【这个例子，灵活性就非常高了】</p>
	<a-space direction="vertical" style="width: 500px">
		<a-upload v-model:file-list="fileList16_1" action="http://oa.qiqiao.com/common/common/uploaddemo" @change="handleChange11_1">
			<a-button>
				<upload-outlined class="ant-icon"></upload-outlined> Click to Upload
			</a-button>
			<template #itemRender="{ file, actions }">
				<a-space>
					<span :style="file.status === 'error' ? 'color: red' : ''">{{ file.name }}</span>
					<a href="javascript:;" @click="actions.download">download</a>
					<a href="javascript:;" @click="actions.remove">delete</a>
				</a-space>
			</template>
		</a-upload>
	</a-space>
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script type="text/javascript">
const message = antd.message;
const domain = 'http://oa.qiqiao.com/uploads/uploaddemo/';
const Main = {
data() {
	return {
		fileIndex: 2,
		
		fileList10_1: [
			{uid: '-1',name: 'image1.png',status: 'done',url: '../static/img/antd.png',},
			{uid: '-xx',name: 'image2.png',status: 'done',url: '../static/img/antd.png',},
			{uid: '-3',name: 'image3.png',status: 'uploading',url: '../static/img/antd.png',},
			{uid: '-5',name: 'image5.png',status: 'error',},
		],
		previewVisible10_1: false,
		previewImage10_1: '',
		previewTitle10_1: '',
		
		fileList11_1: [],
		
		fileList12_1: [],
		uploading12: false,
		
		fileList13_1: [],
		
		fileList14_1: [],
		progress14: {
			strokeColor: {
				'0%': '#108ee9',
				'100%': '#87d068',
			},
			strokeWidth: 3,
			format: percent => `${parseFloat(percent.toFixed(2))}%`,
			class: 'test',
		},
		
		fileList15_1: [
			{uid: '-1',name: 'image1.png',status: 'done',url: '../static/img/antd.png',},
			{uid: '-xx',name: 'image2.png',status: 'done',url: '../static/img/antd.png',response: 'Server Error 500',},
			{uid: '-3',name: 'image3.png',status: 'uploading',url: '../static/img/antd.png',},
			{uid: '-5',name: 'image5.png',status: 'error',response: 'Server Error 500',},
		],
		
		fileList16_1: [
			{uid: '-1',name: 'image1.png',status: 'done',url: '../static/img/antd.png',},
			{uid: '-xx',name: 'image2.png',status: 'done',url: '../static/img/antd.png',response: 'Server Error 500',},
			{uid: '-3',name: 'image3.png',status: 'uploading',url: '../static/img/antd.png',},
			{uid: '-5',name: 'image5.png',status: 'error',response: 'Server Error 500',},
		],
		
	}
},
computed: {
	btn(){
		return function(i){
			return this.fileIndex == i ? "layui-btn" : "layui-btn0";
		}
	},
},
methods:{
	handlePreview10_1(file){
		console.log('handlePreview10_1', file);
		this.previewVisible10_1 = true;
		if(file.response){
			this.previewImage10_1 = domain + file.response.data.path;
		}else{
			this.previewImage10_1 = file.url;
		}
		this.previewTitle10_1 = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
	},
	handleCancel10_1(e){
		this.previewVisible10_1 = false;
		this.previewTitle10_1 = '';
	},
	
	handleChange11_1(info){
		console.log('handleChange11_1', info);
		if (info.file.status !== 'uploading') {
			console.log('handleChange11_1 !== uploading', info.file, info.fileList);
		}
		if (info.file.status === 'done') {
			message.success(`${info.file.name} file uploaded successfully`);
		} else if (info.file.status === 'error') {
			message.error(`${info.file.name} file upload failed.`);
		}
	},
	handleDrop11_1(e){
		console.log('handleDrop11_1', e);
	},
	
	beforeUpload12(file, fileList){
		console.log('beforeUpload12', file, fileList);
		this.fileList12_1 = [...(this.fileList12_1 || []), file];
		return false;
	},
	handleRemove12(file){
		console.log('handleRemove12', file);
		const index = this.fileList12_1.indexOf(file);
		const newFileList = this.fileList12_1.slice();
		newFileList.splice(index, 1);
		this.fileList12_1 = newFileList;
	},
	handleUpload12(){
		const formData = new FormData();
		this.fileList12_1.forEach((file) => {
			formData.append('files[]', file);
		});
		// console.log(formData);
		
//原生JS实现ajax（post）
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
xhr.open('post', 'http://oa.qiqiao.com/common/common/uploaddemo', true );
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求,传参数
xhr.send(formData);
xhr.onreadystatechange = function () {
	//这步为判断服务器是否正确响应
	console.log(xhr);
	if (xhr.readyState == 4 && xhr.status == 200) {
		console.log(xhr.responseText);
	} 
}
//很遗憾，这样做不能正常上传文件，建议用“先上传，后统一处理的方式”实现手动上传。
	},
	
	previewFile13(file){
		console.log('previewFile13', file);
	},
	
	handleClick15(e){
		console.log('handleClick15', e);
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");

</script>
</html>
